<template>
  <div class="app-container">
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets" style="margin-top: 5px"></i>
      <span style="margin-top: 5px">预约数据统计</span>
    </el-card>
    <div class="table-container">
      <el-table ref="productCateTable"
                style="width: 100%"
                :data="list"
                v-loading="listLoading" border>
        <el-table-column label="预约日期" width="200" align="center">
          <template slot-scope="scope">{{scope.row.applyDate}}</template>
        </el-table-column>
        <el-table-column label="已领取数量"  width="200" align="center">
          <template slot-scope="scope" >
            <span @click="handleClick(scope.row,1)">{{scope.row.hasOrderNumber}}</span>
            <span @click="handleClick(scope.row,1)" style="color: dodgerblue">查看详情</span>
          </template>
        </el-table-column>
        <el-table-column label="待领取数量" width="200" align="center">
          <template slot-scope="scope">
            <span @click="handleClick(scope.row,0)">{{scope.row.unOrderNumber}}</span>
            <span @click="handleClick(scope.row,0)" style="color: dodgerblue">查看详情</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="车牌详情" :visible.sync="selectDialogVisible" width="50%">
      <el-input v-model="dialogData.listQuery.plateNumber"
                style="width: 250px;margin-bottom: 20px"
                size="small"
                placeholder="车牌号搜索">
        <el-button slot="append" icon="el-icon-search" @click="handleSelectSearch()"></el-button>
      </el-input>
      <el-table :data="dialogData.list"
                @selection-change="handleDialogSelectionChange" border>
        <el-table-column type="selection" width="60" align="center"></el-table-column>
        <el-table-column label="车牌号" align="center" >
          <template slot-scope="scope">{{scope.row.plateNumber}}</template>
        </el-table-column>
        <el-table-column label="车牌类型" width="160" align="center">
          <template slot-scope="scope">{{scope.row.plateType}}</template>
        </el-table-column>
        <el-table-column label="申领日期" width="160" align="center">
          <template slot-scope="scope">{{scope.row.applyDate}}</template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleDialogSizeChange"
          @current-change="handleDialogCurrentChange"
          layout="prev, pager, next"
          :current-page.sync="dialogData.listQuery.pageNum"
          :page-size="dialogData.listQuery.pageSize"
          :page-sizes="[5,10,15]"
          :total="dialogData.total">
        </el-pagination>
      </div>
      <div style="clear: both;"></div>
      <div slot="footer">
        <el-button  size="small" @click="selectDialogVisible = false">取 消</el-button>
        <el-button  size="small" type="primary" @click="handleSelectDialogConfirm()">确 定</el-button>
      </div>
    </el-dialog>
    <div class="pagination-container">
    </div>
    <div class="rili-content">
      <el-button type="primary" @click="exportExcel()">导出</el-button>
      <el-calendar v-model="calendarValue"  @select="dateChange"></el-calendar>
    </div>
  </div>
</template>

<script>
  import {fetchList,fetchAppointmentPlateList} from '@/api/productCate'
  import { Calendar } from "element-ui"

  export default {
    name: "productCateList",
    components: {
      'el-calendar': Calendar
    },
    data() {
      return {
        calendarValue:new Date(),
        selectDialogVisible:false,
        list: null,
        total: null,
        listLoading: true,
        listQuery: {
          pageNum: 1,
          pageSize: 5,
          applyDate:'2025-07-24'
        },
        dialogData:{
          list: null,
          total: null,
          multipleSelection:[],
          listQuery:{
            applyDate:null,
            plateNumber: null,
            pageNum: 1,
            pageSize: 5,
            type:1
          }
        },
      }
    },
    created() {
      this.getList();
    },
    watch: {
      $route(route) {
        this.getList();
      },
      calendarValue: {
        handler(newDate) {
          const d = new Date(newDate);
          let month = '' + (d.getMonth() + 1);
          let day = '' + d.getDate();
          const year = d.getFullYear();
          if (month.length < 2) month = '0' + month;
          if (day.length < 2) day = '0' + day;
          this.listQuery.applyDate = [year, month, day].join('-');
          // 只有当用户点击选择日期时才处理
          this.getList();
        },
      },
    },
    methods: {
      exportExcel(){
        alert("导出excel")
      },
      handleDialogSelectionChange(val){
        this.dialogData.multipleSelection = val;
        alert(val);
      },
      handleDialogSizeChange(val) {
        this.dialogData.listQuery.pageNum = 1;
        this.dialogData.listQuery.pageSize = val;
        this.getDialogList();
      },
      handleDialogCurrentChange(val) {
        this.dialogData.listQuery.pageNum = val;
        this.getDialogList();
      },
      handleSelectDialogConfirm(){
        this.getDialogList();
      },
      dateChange(date){
        this.listQuery.applyDate = date;
        this.calendarValue = date;
        this.getList();
      },
      handleClick(row,type){
        this.selectDialogVisible=true;
        this.dialogData.listQuery.plateNumber=null;
        this.dialogData.listQuery.type=type;
        this.dialogData.listQuery.applyDate=row.applyDate;
        this.getDialogList();

      },
      getDialogList() {
        this.listLoading = true;
        fetchAppointmentPlateList(this.dialogData.listQuery).then(response => {
          this.listLoading = false;
          this.dialogData.list = response.data.records;
          this.dialogData.total = response.data.total;
        });
      },
      getList() {
        this.listLoading = true;
        fetchList(this.listQuery).then(response => {
          this.listLoading = false;
          this.list = response.data;
          this.total = response.data.total;
        });
      },
      handleSizeChange(val) {
        this.listQuery.pageNum = 1;
        this.listQuery.pageSize = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.pageNum = val;
        this.getList();
      }
    },
    filters: {
    }
  }
</script>

<style scoped>

</style>
